<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界前二十国家GDP统计</title>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .chart-container {
            width: 80%;
            max-width: 1000px;
            margin: 0 auto;
        }
        .description {
            margin-top: 20px;
            text-align: center;
            color: #555;
        }
    </style>
</head>
<body>
    <h1>世界前二十国家GDP统计</h1>
    <div class="chart-container">
        <canvas id="gdpChart"></canvas>
    </div>
    <div class="description">
        <p>此图表展示了世界上 GDP 最高的前二十个国家的 GDP 统计数据。</p>
        <p>数据来源：公开统计数据（单位：万亿美元）。</p>
    </div>

    <script>
        // 数据：世界上 GDP 最高的前二十个国家及其 GDP（单位：万亿美元）
        const countries = [
            "美国", "中国", "日本", "德国", "英国",
            "印度", "法国", "意大利", "加拿大", "韩国",
            "俄罗斯", "巴西", "澳大利亚", "西班牙", "墨西哥",
            "印度尼西亚", "荷兰", "沙特阿拉伯", "土耳其", "瑞士"
        ];
        const gdp = [
            26.24, 17.96, 4.23, 4.07, 3.08,
            3.73, 2.78, 2.07, 2.14, 1.71,
            1.86, 1.83, 1.68, 1.43, 1.41,
            1.32, 1.08, 1.06, 0.96, 0.88
        ];

        // 获取 canvas 元素
        const ctx = document.getElementById('gdpChart').getContext('2d');

        // 创建柱状图
        const gdpChart = new Chart(ctx, {
            type: 'bar', // 柱状图
            data: {
                labels: countries, // 国家名称
                datasets: [{
                    label: 'GDP（万亿美元）',
                    data: gdp, // GDP 数据
                    backgroundColor: 'rgba(54, 162, 235, 0.6)', // 柱状图颜色
                    borderColor: 'rgba(54, 162, 235, 1)', // 边框颜色
                    borderWidth: 1 // 边框宽度
                }]
            },
            options: {
                responsive: true, // 图表自适应
                plugins: {
                    legend: {
                        display: false, // 不显示图例
                    },
                    title: {
                        display: true,
                        text: '世界前二十国家GDP统计（单位：万亿美元）' // 图表标题
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true, // Y 轴从零开始
                        title: {
                            display: true,
                            text: 'GDP（万亿美元）' // Y 轴标题
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '国家' // X 轴标题
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>